<template>
  <div class="mid">
    <div class="joinpart" id="jp">
      <div class="accountpart ordermove">
        <!-- 轮播图部分 -->
        <div class="slide">
          <el-carousel direction="vertical" :autoplay="true">
            <el-carousel-item v-for="item in 3" :key="item">
              <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right">
          <div class="goal">
            <h1 v-text="item.productName">GOAL</h1>
            <p>&emsp;&emsp;itemId: 商品编号</p>
            <p>&emsp;&emsp;category: 商品所属大类</p>
            <p>&emsp;&emsp;listPrice: 商品单价</p>
            <p>&emsp;&emsp;attribute1;&emsp;productDescription: 商品描述</p>

            <p>
              &emsp;&emsp;Adult Female,Friendly house cat, doubles as a princess
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      item: "",
    };
  },
  mounted() {
    this.item = this.$route.params.item;
    this.loadItem();
  },
  methods: {
    //加载item信息以及背景
    loadItem() {
      this.$axios({
        methods: "get",
        url: `http://127.0.0.1:9090/catalog/items/${this.item}`,
      }).then((res) => {
        this.item = res.data.data;
        console.log(this.item);
        // 加载背景
        let picUrl = require("../assets/catalog-" +
          this.item.attribute3 +
          ".jpg");
        console.log(picUrl);
        $(".joinpart").css("background-image", "url(" + picUrl + ")");

        //加载轮播图
        this.loadSlide();
      });
    },

    //加载轮播图图片
    loadSlide() {
      console.log(
        "%c" + "picUrl",
        "background: #336699; color: #fff; border-radius:3px; font-size:14px;  font-family:" +
          "微软雅黑"
      );
      let picUrl = "http://127.0.0.1:9090/images/" + this.item.itemId;
      this.$axios({
        methods: "get",
        url: picUrl + "-1.png",
      })
        .then((res) => {
          $(".el-carousel__item:nth-child(3n)").css(
            "background-image",
            "url(" + picUrl + "-1.png)"
          );
          $(".el-carousel__item:nth-child(3n+1)").css(
            "background-image",
            "url(" + picUrl + "-2.png)"
          );
          $(".el-carousel__item:nth-child(3n+2)").css(
            "background-image",
            "url(" + picUrl + "-3.png)"
          );
        })
        .catch((res) => {
          let picUrl1 = require("../assets/catalog-" +
            this.item.attribute3 +
            ".jpg");
          $(".el-carousel__item:nth-child(3n)").css(
            "background-image",
            "url(" + picUrl1 + ")"
          );
          $(".el-carousel__item:nth-child(3n+1)").css(
            "background-image",
            "url(" + picUrl1 + ")"
          );
          $(".el-carousel__item:nth-child(3n+2)").css(
            "background-image",
            "url(" + picUrl1 + ")"
          );
        });
    },
  },
};
</script>

<style scoped>
.accountpart .right {
  width: 800px;
  height: 400px;
}
.accountpart {
  margin-top: 100px;
  width: 800px;
  height: 400px;
  display: flex;
  justify-content: center;
  border-radius: 50px;
  animation: loadbac 1s linear;
  transition: 1s ease 0.2s;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 15px rgb(83, 103, 110);
  background: rgba(71, 142, 175, 0.2);
  border-radius: 15px;
  overflow: hidden;
}
.mid {
  height: 100vh;
  width: 100vw;
}
.slide {
  flex: 3;
  width: 20vw;
  height: 100vh;
}
.el-carousel__item {
  border-radius: 20px;
}
.el-carousel__item h3 {
  background-image: url("http://127.0.0.1:9090/images/EST-11-1.png");
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  margin: 0;
}
.el-carousel /deep/ .el-carousel__container {
  margin-top: 50px;
  margin-left: 50px;
  margin-bottom: 50px;
  height: 300px;
}
.el-carousel__item:nth-child(3n) {
  background-image: url("http://127.0.0.1:9090/images/EST-4-1.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.el-carousel__item:nth-child(3n + 1) {
  background-image: url("http://127.0.0.1:9090/images/EST-4-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #d3dce6;
}
.el-carousel__item:nth-child(3n + 2) {
  background-image: url("http://127.0.0.1:9090/images/EST-14-3.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #d3dce6;
}
.mid {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.joinpart {
  margin-top: 50px;
  width: 1100px;
  height: 600px;
  display: flex;
  justify-content: center;
  /* background-image: url("../assets/background.jpg"); */
  background-repeat: no-repeat;
  background-size: 1300px;
  overflow: hidden;
  border-radius: 50px;
  animation: loadbac 1s linear;
  transition: 1s ease 0.2s;
}

.joinpart .left {
  width: 400px;
  height: 100%;
}

.joinpart .left .square {
  width: 250px;
  height: 250px;
  border: 5px solid rgb(183, 207, 226);
  margin: auto;
  margin-top: 200px;
  border-radius: 30%;
  animation: a1 3s infinite linear;
}

.left .square::before {
  content: "";
  width: 250px;
  height: 250px;
  transform: rotate(30deg);
  border: 5px solid rgb(183, 207, 226);
  border-radius: 40%;
  position: absolute;
  animation: a2 25s infinite linear;
}

.left .square::after {
  content: "";
  width: 250px;
  height: 250px;
  transform: rotate(60deg);
  border: 5px solid rgb(183, 207, 226);
  border-radius: 30%;
  position: absolute;
  animation: a2 60s infinite linear;
}

.left .tit {
  position: absolute;
  font-size: 2em;
  margin-left: 130px;
  margin-top: -170px;
  color: rgb(183, 207, 226);
  z-index: -10;
}

.left .square:hover {
  animation: a1 15s infinite linear;
}

.left .square:hover::before {
  animation: a2 80s infinite linear;
}

.left .square:hover::after {
  animation: a1 50s infinite linear;
}

.joinpart .right {
  flex: 6;
  width: 800px;
  height: 100%;
  margin-left: 10px;
}

.joinpart .goal {
  color: rgb(206, 228, 238);
  width: 500px;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.joinpart .goal h1 {
  margin-left: 25px;
  font-size: 4em;
  font-weight: bolder;
}

.joinpart .goal p {
  word-wrap: break-word;
}

.meth {
  width: 500px;
  height: 100px;
  flex-direction: row;
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}

.meth .icon {
  width: 30px;
  height: 30px;
  background-size: cover;
  border-radius: 5px;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.4s ease 0s;
}

.meth .icon:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.meth .qq {
  /* background-image: url("../img/qq.png"); */
  background-size: 25px;
}

.meth .vx {
  /* background-image: url("../img/vx.png"); */
}

.meth .bili {
  /* background-image: url("../img/bili.png"); */
  background-color: rgb(245, 128, 147);
}

.meth .gh {
  /* background-image: url("../img/github.png"); */
  background-size: 40px;
}

.icon ul {
  display: none;
  list-style: none;
  margin-top: 30px;
  width: 150px;
  margin-left: -80px;
  color: white;
  font-size: 14px;
}

.icon:hover ul {
  display: block;
  position: absolute;
}

@keyframes a1 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes a2 {
  to {
    transform: rotate(-10800deg);
  }
}

@keyframes loadbac {
  0% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
    margin-top: 50px;
  }
}
</style>
